<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <!-- Banner -->
      <ServicesBanner :params="bannerParams" />

      <!-- Contact Us -->
      <section class="mt-24">
        <div class="mx-auto w-300 flex">
          <div class="contact-us">
            <div class="contact-us-title"> Contact Us</div>
            <GetQuote />
          </div>
          <div class="contact-details">
            <div>
              <!-- 标题部分 -->
              <div class="font-bold mb-6 text-[#54595F]" style="font-size: 25px; line-height: 31px">
                From prototype design to production
              </div>

              <!-- 描述文字 -->
              <p
                class="mb-8 tracking-normal text-[#525252] text-justify"
                style="font-size: 15px; line-height: 26px"
              >
                We are proficient in CNC machining | injection mould | 3D printing | die-casting |
                sheet metal manufacturing | powder metallurgy (stainless steel, stainless iron,
                titanium alloy) | silicone products. We can provide high-quality prototypes, fast
                tools and small-batch manufacturing services in automobiles, aerospace, medical
                care, robots, drones and energy. We can provide you with complete solutions,
                including supply chain integration and trial production.
              </p>

              <!-- 联系方式 -->
              <div>
                <h2 class="font-bold mb-4" style="font-size: 25px; line-height: 43px"
                  >Contact Details</h2
                >
                <div class="space-y-6" data-aos="slide-left">
                  <!-- 电话 -->
                  <div class="flex items-center">
                    <span class="font-semibold">Tel:</span>
                    <span class="ml-4">+86 13172452278</span>
                    <span class="ml-auto font-semibold">LionLee</span>
                    <span class="ml-2">General Manager</span>
                  </div>
                  <!-- 邮件 -->
                  <div class="flex items-center">
                    <span class="font-semibold">Email:</span>
                    <span class="ml-4 underline"> lionlee@maxpreciseglobal.com </span>
                  </div>
                  <!-- 地址 -->
                  <div>
                    <span class="font-semibold">Address:</span>
                    <p class="">
                      Yisha Road,Shatian Town,Dongguan City,Guangdong Province
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- WORK WITH US -->
      <WorkWithUS />

      <!-- 谷歌地图 -->
      <GoogleMap />
    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import GetQuote from '../components/GetQuote.vue'
import Header from '../components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import WorkWithUS from '../components/Home/WorkWithUS.vue'
import ServicesBanner from '../components/ServicesBanner.vue'

import banner from '/src/images/banner-contact-us.webp'
import GoogleMap from '@/components/common/GoogleMap.vue'

const bannerParams = {
  title: 'Contact US',
  imgUrl: banner
}
const menuItems = [
  { label: 'plastic-injection-molding', value: 'option1' },
  { label: 'plastic-injection-molding', value: 'option2' },
  { label: 'plastic-injection-molding', value: 'option3' }
]

const onSelect = (item) => {
  alert(`你选择了：${item.label}`)
}
</script>

<style scoped>
.contact-us {
  padding: 40px;
  width: 690px;
  box-shadow: 5px 21px 26px 10px rgba(162, 162, 162, 0.5);
}

.contact-us-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 34px;
  color: #54595f;
  margin-bottom: 30px;
}

.contact-details {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 40px;
  width: 590px;
}
</style>
